<template>
	<view class="selectStore">
		<nav-bars title="选择店铺"></nav-bars>
		<view class="search">
			<view class="searchBox" :class="{'active':searchInput==''}">
				<text class="iconfont icon-search"></text>
				<input type="text" value="" @input="clearSearch" v-model="searchInput" placeholder="搜索店铺" confirm-type="search" @confirm="searchFn" />
			</view>
			<view class="cancelBtn" style="flex-shrink: 0;" v-if="searchInput!=''" @click="cancelSearch">取消</view>
		</view>
		<view class="content">
			<view class="storeList">
				<view class="item" v-for="(item,index) in storeList" :key="index">
					<image :src="item.store_logo.path" mode=""></image>
					<view class="infoBox">
						<view class="infoText">
							<view class="storeTit omit-1">{{item.store_name}}</view>
							<text>商品数量：{{item.product_total}}</text>
						</view>
						<view class="plusBtn" @click="addBtn(item)">
							<image :src="`${baseImg}/static/adminShop/relePlus.png`" mode=""></image>
							添加
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				baseImg:this.$static,
				searchInput:'',
				page:1,
				pagesize:10,
				storeList:[],
				store_id:''
			}
		},
		onLoad(options) {
			this.store_id = options.store_id;
			this.getStoreList();
		},
		onReachBottom() {
			this.getStoreList('onReach')
		},
		methods:{
			// 搜索
			searchFn(){
				this.getStoreList()
			},
			
			// 搜索取消按钮
			cancelSearch(){
				this.searchInput = ''
			},
			
			// 获取店铺列表
			getStoreList(type){
				let role = this.$store.state.index.role;
				let sid = this.$store.state.index.sid;
				if(type=='onReach'){
					this.page++
				}else{
					this.page = 1
				}
				let params = {
					keyword:this.searchInput,
					page:this.page,
					pagesize:this.pagesize,
					store_id:role=='shop'?sid:''
				}
				this.$api.getStoreList(params).then(res=>{
					console.log(res,'店铺列表')
					if(res.code==1){
						if(type=='onReach'){
							this.storeList = this.storeList.concat(res.data.list)
						}else{
							this.storeList = res.data.list?res.data.list:[]
							if(role=='shop' && this.searchInput==''){
								this.storeList.unshift(res.data.store)
							}
						}
					}
				})
			},
			// 清除搜索
			clearSearch(){
				if(this.searchInput==''){
					this.getStoreList()
				}
			},
			
			// 添加按钮
			addBtn(item){
				console.log(item,'选择的店铺')
				let pages = getCurrentPages();  //获取所有页面栈实例列表
				console.log(pages)
				let nowPage = pages[ pages.length - 1];  //当前页页面实例
				let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
				console.log(prevPage)
				console.log(item.id,this.store_id,'----店铺id')
				if(item.id != this.store_id){ //重新选择了其他店铺时清空之前店铺选择的商品
					prevPage.$vm.shopList = [];
				}
				prevPage.$vm.storeInfo = item;
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	page{height: 100%;}
	.selectStore{
		padding: 32rpx;
		height: 100%;
		background-color: #fff;
		// position: relative;
		.search{
			display: flex;
			align-items: center;
			justify-content: space-between;
			// position: fixed;
			// top: 0;
			// left: 0;
			.searchBox{
				display: flex;
				align-items: center;
				transition: 0.2s;
				width: 588rpx;
				height: 80rpx;
				border-radius: 40rpx;
				background-color: #FAFAFA;
				padding: 0 29rpx;
				.iconfont{
					font-size: 28rpx;
					margin-right: 17rpx;
				}
			}
			.active{
				width: 100%;
			}
			
		}
		.content{
			.storeList{
				padding-bottom: constant(safe-area-inset-bottom);				padding-bottom: env(safe-area-inset-bottom);
				background-color: #fff;
				.item{
					display: flex;
					align-items: center;
					image{
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						flex-shrink: 0;
						margin-right: 22rpx;
					}
					.infoBox{
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-bottom: 2rpx solid #F5F5F5;
						.infoText{
							padding: 40rpx 0 38rpx 0;
							font: 500 30rpx/30rpx PingFang SC;
							color: #1B1B1B;
							display: flex;
							flex-direction: column;
							.storeTit{
								width: 410rpx;
							}
							text{
								margin-top: 15rpx;
								font: 500 22rpx/22rpx PingFang SC;
								color: #999999;
							}
						}
						.plusBtn{
							display: flex;
							align-items: center;
							image{
								width: 22rpx;
								height: 22rpx;
								margin-right: 10rpx;
							}
							padding: 14rpx 22rpx;
							border: 2rpx solid #B59A57;
							border-radius: 50rpx;
							font: 500 24rpx/24rpx PingFang SC;
							color: #B59A57;
						}
					}
				}
			}
		}
	}
</style>
